<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <div class="panel-header panel-header-sm my-echarts-header"></div>
        <div class="content my-echarts-container" id="chart_container">
        </div>
    </div>
    <div class="my-fixed-right w-75" style="display: none;">
        <div class="card mb-0">
            <div class="card-header">
                <button type="button" id="detail_close_btn" class="close">&times;</button>
                <h5 class="card-title">节点数据详情</h5>
            </div>
            <div class="card-body my-scroll-panel-h680px">
                <div class="table-responsive">
                    <table class="table my-table-layout-fixed">
                        <tbody>
                        <tr>
                            <td class="text-right my-table-col-100px">源应用</td>
                            <td id="appName_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">源IP</td>
                            <td id="ipAndPort_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">调用栈</td>
                            <td id="previousStackTrace_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">链路标识</td>
                            <td id="serialNumber_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">Caller</td>
                            <td id="caller_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">请求ID</td>
                            <td id="requestId_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">时间</td>
                            <td id="date_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">目标应用</td>
                            <td id="targetAppName_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">目标IP</td>
                            <td id="targetIpAndPort_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">类名</td>
                            <td id="targetClassName_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">方法名</td>
                            <td id="targetMethodName_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">请求参数</td>
                            <td id="requestArgs_td"></td>
                        </tr>
                        <tr>
                            <td class="text-right my-table-col-100px">响应(ms)</td>
                            <td id="rt_td"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="serialNumber_hide_elem" th:value="${serialNumber}"/>
<input type="hidden" id="requestId_hide_elem" th:value="${requestId}"/>

<div th:insert="js"></div>
<script src="/js/plugins/echarts.js" type="text/javascript"></script>
<script src="/js/plugins/echarts-gl.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#call_logs_li").addClass("active");

        $("#detail_close_btn").click(function () {
            $(".my-fixed-right").hide();
            $("#appName_td").text("");
            $("#ipAndPort_td").text("");
            $("#previousStackTrace_td").text("");
            $("#serialNumber_td").text("");
            $("#caller_td").text("");
            $("#requestId_td").text("");
            $("#date_td").text("");
            $("#targetAppName_td").text("");
            $("#targetIpAndPort_td").text("");
            $("#targetClassName_td").text("");
            $("#targetMethodName_td").text("");
            $("#requestArgs_td").text("");
            $("#rt_td").text("");
        });

        var myChart = echarts.init(document.getElementById("chart_container"));
        myChart.on("dblclick", function (param) {
            var name = param.name;
            var requestId = name.split("\n")[0];
            if (requestId !== "root") {
                $.ajax({
                    url: "/graph/log_details?rid=" + requestId,
                    type: "GET",
                    dataType: "JSON",
                    success: function (response) {
                        $("#appName_td").text(response.appName);
                        $("#ipAndPort_td").text(response.ipAndPort);
                        $("#previousStackTrace_td").text(response.previousStackTrace);
                        $("#serialNumber_td").text(response.serialNumber);
                        $("#caller_td").text(response.caller);
                        $("#requestId_td").text(response.requestId);
                        $("#date_td").text(response.date);
                        $("#targetAppName_td").text(response.targetAppName);
                        $("#targetIpAndPort_td").text(response.targetIpAndPort);
                        $("#targetClassName_td").text(response.targetClassName);
                        $("#targetMethodName_td").text(response.targetMethodName);
                        $("#requestArgs_td").text(response.requestArgs);
                        $("#rt_td").text(response.rt);
                        $(".my-fixed-right").show();
                    }
                });
            }
        });
        myChart.showLoading();
        $.getJSON("/graph/call_graph_datas?sn=" + $("#serialNumber_hide_elem").val() + "&rid=" + $("#requestId_hide_elem").val(),
            function (data) {
                myChart.hideLoading();
                myChart.setOption({
                    title: {
                        show: true,
                        text: "调用链路图谱, 链路标识=" + $("#serialNumber_hide_elem").val(),
                        subtext: "双击节点，查看详情!"
                    },
                    tooltip: {
                        trigger: "item",
                        triggerOn: "mousemove"
                    },
                    series: [
                        {
                            type: "tree",
                            data: [data],
                            top: "1%",
                            left: "18%",
                            bottom: "1%",
                            right: "20%",
                            symbolSize: 30,
                            label: {
                                position: "left",
                                verticalAlign: "middle",
                                align: "right",
                                fontSize: 12,
                                formatter: "{b}\n{c}"
                            },
                            leaves: {
                                label: {
                                    position: "right",
                                    verticalAlign: "middle",
                                    align: "left"
                                }
                            },
                            expandAndCollapse: false,
                            animationDuration: 550,
                            animationDurationUpdate: 750
                        }
                    ]
                });
            });
    });

</script>
</body>
</html>